Header 标签

使用场景

原始设计稿中通常包含 Header 图层。而实际开发中， Header 中的状态栏属于无效图层，无需写代码，导航栏在不同的平台配置也存在差异，Header 标签可自动过滤掉无效图层并提取有效信息插入至配置文件中。

标记 Header 标签后：

• 标记上页面顶部的 Header 栏，滚动时固定在顶部；
• 如果节点不在顶部，会被移动到顶部，以便形成合理的布局，将节点固定在顶部；
• 每个页面只能标记一个 Header；
• 生成微信小程序代码时，自动生成导航栏配置。

标记流程

如果 Header 组件没有被自动标记上，可以采用手动标记的方法，具体操作流程如下：

1. 选中需要滚动时固定在底部的元素节点；
2. 点击上方菜单栏中的「标记组件」，打开设置标签面板；
3. 选择「官方标签」，点击 Header 即可。

常见问题

问：页面头部状态栏和右侧的功能性操作按钮丢失?

答：在包含背景图片或背景色的头部图层中，为方便开发拷贝区域代码，系统会自动去除无效图层对应的节点元素。

问：前端代码中，标记上 Header 标签后如何输出代码?

答：代码展现形式有两种：
1.在微信小程序平台，Header 组件中的“标题”内容会自动被提取到 JSON 文件；

2.微信小程序外的其他平台，Header 组件以单独节点输出。